<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片懒加载</title>
    <script src="jquery.min.js"></script>
    <style>
        img{
            display: block;
            margin: 0 auto;
            margin-top: 100px;
        }
    </style>
</head>
<body>
        <!-- 当页面滑动到网页可视区域时，再显示图片  作用：大大提高网页性能
        注意：使用插件easylazyload时，js引入文件和js调用必须写道dom元素最后面。先有图片 -->

        <img data-lazy-src="https://picsum.photos/500/300?image=100" />
        <img data-lazy-src="https://picsum.photos/500/300?image=101" />
        <img data-lazy-src="https://picsum.photos/500/300?image=102" />
        <img data-lazy-src="https://picsum.photos/500/300?image=103" />
        <img data-lazy-src="https://picsum.photos/500/300?image=104" />
        <img data-lazy-src="https://picsum.photos/500/300?image=105" />
        <img data-lazy-src="https://picsum.photos/500/300?image=106" />

        <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        <script src="图片懒加载插件/EasyLazyload/dist/EasyLazyload.min.js"></script>
        <script>
            lazyLoadInit({
                // coverColor:"red",
                coverDiv:"<h1>懒加载图片来了</h1>",
                offsetBottom:0,
                offsetTopm:0,
                showTime:1100,
                onLoadBackEnd:function(i,e){
                    console.log("onLoadBackEnd:"+i);
                }
                ,onLoadBackStart:function(i,e){
                    console.log("onLoadBackStart:"+i);
                }
            });
        </script>

</body>
</html>